<template>
  <div class="hamburger">
    <i class="el-icon-s-fold pointer" @click="toggleSideBar"></i>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item,i) in breadcrumbItems" :key="i">
        <a v-if="i<breadcrumbItems.length-1">{{item.name}}</a>
        <span v-else>{{item.name}}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  data () {
    return {
      breadcrumbItems: []
    }
  },
  watch: {
    $route: {
      handler (newRoute) {
        this.breadcrumbItems = []
        newRoute.matched.forEach(v => {
          v.meta.title && this.breadcrumbItems.push({
            name: v.meta.title,
            path: v.path
          })
        })
      },
      immediate: true
    }
  },
  methods: {
    toggleSideBar () {
      this.$emit('toggleSideBar')
    }
  }
}
</script>

<style lang="scss" scoped>
.hamburger {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  i {
    font-size: 24px;
    margin-right: 10px;
  }
}
</style>
